<!-- components/FormPicker.vue -->
<template>
  <view class="form-card">
    <text class="form-label" :class="{ required }">{{ label }}</text>
    <picker 
      mode="selector" 
      :range="options"
      :value="selectedIndex"
      @change="handleChange"
    >
      <view class="picker-item">
        <text>{{ displayValue || placeholder }}</text>
      </view>
    </picker>
    <view class="divider" v-if="showDivider"></view>
  </view>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      required: true
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    required: {
      type: Boolean,
      default: false
    },
    showDivider: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue'],
  computed: {
    selectedIndex() {
      return this.options.indexOf(this.modelValue)
    },
    displayValue() {
      return this.modelValue
    }
  },
  methods: {
    handleChange(e) {
      const selected = this.options[e.detail.value]
      this.$emit('update:modelValue', selected)
    }
  }
}
</script>

<style scoped>
.form-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}

.form-card .form-label {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.form-card .form-label.required::before {
  content: '*';
  color: #f44336;
  margin-right: 8rpx;
}

.picker-item {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #333;
}

.picker-item text {
  color: #999;
}

.divider {
  height: 1rpx;
  background: #eee;
  margin: 20rpx -30rpx 0;
}
</style>